<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('单位拨款详情')"/>
</head>
<body class="gray-bg">
<div class="container-div" id="bokuandetail">
    <input type="hidden" th:value="${jingfeipiciid}" id="jingfeipiciid"/>
    <input type="hidden" th:value="${deptid}" id="deptid"/>
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId1" v-if="isdeptshow">
                <div class="select-list">
                    <ul>
                        <li>
                            <input type="text" name="jingfeipiciid" hidden th:value="${jingfeipiciid}"/>
                        </li>
                        <li>
                            <input type="text" name="deptid" hidden th:value="${deptid}"/>
                        </li>
                        <li>
                            <label style="width:80px;">特贴单位&nbsp&nbsp</label>
                            <input style="width: 150px !important;" type="text" name="danweimingcheng" v-model="danweimingcheng"/>
                        </li>

                        <li>
                            <label style="width: 80px;">收款状态&nbsp&nbsp</label>
                            <select style="width: 150px !important;" name="shoukuanzhuangtai" v-model="shoukuanzhuangtai">
                                <option value ="">所有</option>
                                <option value ="0">未收到</option>
                                <option value ="1">已收到</option>
                            </select>
                        </li>

                        <li class="sousuo">
                            <a class="btn btn-success btn-md"
                               @click="bindJingfeiDetailList"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-md"
                               onclick="$.form.reset('formId1','bootstrap-table1')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
<!--            <form id="formId2">-->
<!--                <div class="select-list" v-if="iszhuanjiashow">-->
<!--                    <ul>-->
<!--                        <li>-->
<!--                            <input type="text" name="jingfeipiciid" hidden th:value="${jingfeipiciid}"/>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <input type="text" name="deptid" hidden th:value="${deptid}"/>-->
<!--                        <li>-->
<!--                            <label style="width:100px;">专家&nbsp&nbsp</label>-->
<!--                            <input type="text" name="zhuanjiaxingming" v-model="zhuanjiaxingming"/>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a class="btn btn-success btn-md"-->
<!--                               onclick="$.table.search('formId2','bootstrap-table2')"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
<!--                            <a class="btn btn-warning btn-md"-->
<!--                               onclick="$.form.reset('formId2','bootstrap-table2')"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </form>-->
        </div>

        <div>
<!--            <a :class="isdeptshow?'btn btn-success changeA' : 'btn btn-white changeA'"-->
<!--               style="margin-top: 20px;width: 120px;" @click="showdanwei">-->
<!--                下级单位-->
<!--            </a>-->
<!--            <a :class="iszhuanjiashow?'btn btn-success changeA' : 'btn btn-white changeA'"-->
<!--               style="margin-top: 20px;width: 120px;" @click="showzhuanjia">-->
<!--                本级专家-->
<!--            </a>-->
        </div>

        <div class="col-sm-12 select-table table-striped" style="" v-show="isdeptshow">
            <table id="bootstrap-table" class="table-hover table-striped table" style="text-align: center;">
                <thead>
                    <tr style="font-weight: bold;">
                        <td>序号</td>
                        <td>单位名称</td>
                        <td>实发金额(元)</td>
                        <td>实发人数</td>
<!--                        <td>拨款状态</td>-->
                        <td>收款状态</td>
                        <td>收款时间</td>
<!--                        <td>操作</td>-->
                    </tr>
                <thead>
                <tbody>
                    <tr v-for="(detailitem,index) in jingfeidetaillist" v-if="jingfeidetaillist.length > 0">
                        <td style="vertical-align: middle; text-align: center;" v-text="index+1"></td>
                        <td style="vertical-align: middle; text-align: center;" v-text="detailitem.deptname"></td>
                        <td style="vertical-align: middle; text-align: center;" v-text="detailitem.fafangjine"></td>
                        <td style="vertical-align: middle; text-align: center;" v-text="detailitem.fafangrenshu"></td>
<!--                        <td style="vertical-align: middle; text-align: center;" v-if="detailitem.isshangjifafang==0">未发放</td>
                        <td style="vertical-align: middle; text-align: center;" v-else-if="detailitem.isshangjifafang==1">已发放</td>-->
                        <td style="vertical-align: middle; text-align: center;" v-if="detailitem.isshoukuan==0">未收款</td>
                        <td style="vertical-align: middle; text-align: center;" v-else-if="detailitem.isshoukuan==1">已收款</td>
                        <td style="vertical-align: middle; text-align: center;" v-text="detailitem.shoukuanshijian"></td>
                        <!--<td style="vertical-align: middle; text-align: center;" v-text="">
                        </td>-->
                    </tr>
                    <tr v-if="jingfeidetaillist.length === 0">
                        <td style="text-align: center; vertical-align: middle" colspan="6">查无数据</td>
                    </tr>
                </tbody>
            </table>
        </div>
<!--        <div class="col-sm-12 select-table table-striped" style="margin-top: 0" v-show="iszhuanjiashow">-->
<!--            <table id="bootstrap-table2"></table>-->
<!--        </div>-->

    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var vm_bokuandetail = new Vue({
        el : "#bokuandetail",
        data : {
            deptid : $("#deptid").val(),		// 单位ID
            jingfeipiciid : $("#jingfeipiciid").val(),

            jingfeidetaillist : [],//

            isdeptshow : true,
            iszhuanjiashow : false,

            //查询用字段
            danweimingcheng : '',
            shoukuanzhuangtai : 99,
            zhuanjiaxingming : '',

        },
        created : function(){
            var _this = this;

            _this.bindJingfeiDetailList();

        },
        methods : {

            //
            bindJingfeiDetailList : function(){
                var _this = this;

                var jingfeipici_layer = layer.open({type:3});
                $.post('/system/jingfeipici/zjzxjfmx', {
                    piciid : _this.jingfeipiciid,
                    isshangjifafang : 99,
                    isshoukuan : _this.shoukuanzhuangtai,
                    deptname : _this.danweimingcheng,
                    rdm : Math.random()
                },function(ppData) {
                    layer.close(jingfeipici_layer);

                    if (ppData != null) {
                        if (ppData.result==1){
                            var data = ppData.resultContent;
                            _this.jingfeidetaillist = data;
                        }else{
                            layer.alert(ppData.message);
                        }
                    }
                },"json");
            },

            showdanwei() {
                this.isdeptshow = true
                this.iszhuanjiashow = false
            },
            showzhuanjia() {
                this.isdeptshow = false
                this.iszhuanjiashow = true
            },

            reset:function () {
                var _this = this;

                _this.danweimingcheng = "";
                _this.shoukuanzhuangtai = "";
                _this.zhuanjiaxingming = "";

                _this.bindJingfeiDetailList();
            },

        },
    })
</script>
</body>
</html>

<style>
    .changeA {
        width: 120px;
        height: 39px;
        margin-top: 20px;
        margin-right: 10px;
        font-size: 20px;
        font-weight: 700;
    }

    /*定义类名为.thead-blue的样式*/
    .table .bigfont th {
        font-size: 20px;
    }
</style>